import styles from './index.less';
import { useEffect, useState, useCallback } from 'react';
import { Flex, Button } from 'antd';
import { DotLottieReact, DotLottie } from '@lottiefiles/dotlottie-react';

import dotLottie_smaller from '@/assets/images/dotLottie_smaller.jpg';

export default () => {
    const [dotLottie, setDotLottie] = useState<DotLottie>();
    const [speed, setSpeed] = useState<number>(1);
    const [mode, setMode] = useState<'forward' | 'reverse' | 'bounce' | 'reverse-bounce'>('forward');
    const [bgColor,  setBgColor] = useState<string>('transparent');

    const [fileData, setFileData] = useState<any>();

    const onPlay = useCallback(() => {
        console.log(`## 开始 ...`);
    }, []);

    const onPause = useCallback(() => {
        console.log(`## 暂停 ...`);
    }, []);

    const onStop = useCallback(() => {
        console.log(`## 停止 ...`);
    }, []);

    const onComplete = useCallback(() => {
        console.log(`## 结束 ...`);
    }, []);

    const onFrameChange = useCallback(() => {
        // console.log(`## 换桢 ...`); 千万别打印
    }, []);

    useEffect(() => {
        fetch("../../assets/anims/groovyWalk.lottie")
            .then((response) => {
                if (response.ok) {
                    return response.arrayBuffer();
                }
                throw new Error("Network response was not ok.");
            })
            .then((buffer) => {
                setFileData(buffer);
            })
            .catch((error) => {
                console.error(
                    "There has been a problem with your fetch operation:",
                    error
                );
            });
    
        if (dotLottie) {
            dotLottie.addEventListener("play", onPlay);
            dotLottie.addEventListener("pause", onPause);
            dotLottie.addEventListener("stop", onStop);
            dotLottie.addEventListener("complete", onComplete);
            dotLottie.addEventListener("frame", onFrameChange);
        }

        return () => {
            if (dotLottie) {
                dotLottie.removeEventListener("play", onPlay);
                dotLottie.removeEventListener("pause", onPause);
                dotLottie.removeEventListener("stop", onStop);
                dotLottie.removeEventListener("complete", onComplete);
                dotLottie.removeEventListener("frame", onFrameChange);
            }
        };
    }, [dotLottie]);

    const dotLottieRefCallback = (dotLottie: any) => {
        setDotLottie(dotLottie);
    };

    return (
        <div className={styles.container}>
            <a href="https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-react/properties/" target='_blank'>
                官网：https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-react/properties/
            </a>
            <br/>
            <a href="https://github.com/LottieFiles/dotlottie-web">仓库：https://github.com/LottieFiles/dotlottie-web</a>
            <br/>
            <a href="https://lottiefiles.com/tools/lottie-to-dotlottie">工具：Lottie.JSON 转 dotLottie.lottie</a>
            <br/>
            <img src={dotLottie_smaller} style={{ width: 600 }}/>

            <h1>动画的展示与控制</h1>
            <DotLottieReact
                // data={fileData}
                src='https://xuanchuan-shipin.oss-cn-hangzhou.aliyuncs.com/demo/groovyWalk.lottie'
                loop
                autoplay
                speed={speed}
                mode={mode}
                dotLottieRefCallback={dotLottieRefCallback}
                style={{ width: 500, height: 500 }}
                backgroundColor={bgColor}
            />
            <Flex gap="small" wrap align="center">
                <Button type="primary" size='small' onClick={() => {
                    dotLottie?.play();
                }}>播放</Button>
                <Button type="primary" size='small' onClick={() => {
                    dotLottie?.pause();
                }}>暂停</Button>
                <Button type="primary" size='small' onClick={() => {
                    dotLottie?.stop();
                }}>停止</Button>
                <Button type="primary" size='small' onClick={() => {
                    dotLottie?.setFrame(15);
                }}>跳播</Button>

                <Button type="primary" size='small' onClick={() => {
                    setSpeed(speed - 0.1);
                }}>减速</Button>
                <span>速度:{speed.toFixed(1)}</span>
                <Button type="primary" size='small' onClick={() => {
                    setSpeed(speed + 0.1);
                }}>加速</Button>

                <Button type="primary" size='small' onClick={() => {
                    setMode('forward');
                }}>正向</Button>
                <Button type="primary" size='small' onClick={() => {
                    setMode('reverse');
                }}>反向</Button>
                <Button type="primary" size='small' onClick={() => {
                    setMode('bounce');
                }}>弹跳</Button>
                <Button type="primary" size='small' onClick={() => {
                    setMode('reverse-bounce');
                }}>反向弹跳</Button>
                <Button type="primary" size='small' onClick={() => {
                    setBgColor('#48f0a6');
                }}>设置背景</Button>
            </Flex>
        </div>
    );
}
